<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<script>
	var evisjs;
	if (!evisjs) evisjs = new Object();
	
	evisjs.Lightbox = function() {
		this.init();
	}
	evisjs.Lightbox.prototype.init = function() {
		this._originalBodyOverflow = document.body.style.overflow;
	};
	evisjs.Lightbox.prototype.show = function(url, param, options) {
		var bgWidth = Math.max(document.body.offsetWidth, document.body.scrollWidth) + 'px';
		var bgHeight = Math.max(document.body.offsetHeight, document.body.scrollHeight) + 'px';
		
		// BG overlay as container
		var bgDiv = document.createElement('div');
		bgDiv.innerHTML = '<iframe width="' + bgWidth + '" height="' + bgHeight + 
		    '" border="0" frameborder="0" style="background-color: gray; opacity: 0.5; ' + 
		    'filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);">' + 
		    '</iframe><div style="position: absolute; top: 0; left: 0; ' + 
		    'z-index: 99999; width: ' + bgWidth + '; height: ' + bgHeight + 
		    ';" ' + 'onclick="this.parentNode._evisjs_lightbox.hide()"></div>';
		with(bgDiv.style) {
			position = 'absolute';
			top = 0;
			left = 0;
			zIndex = 9999;
		}
		bgDiv._evisjs_lightbox = this;
		
		// Content frame
		var fgDiv = document.createElement('div');
		fgDiv.innerHTML = '<div style="padding: 1px; border-style: solid; border-width: 1px; border-color: #EEF; border-bottom-color: #99F; background-color: #CCF; text-align: right; width: 100%' + 
		    '; height: 16px;"><button onclick="this.parentNode.parentNode.parentNode.' + 
		    '_evisjs_lightbox.hide()" style="padding: 2px 3px 0; line-height: 12px; font: 12px; font-weight: bolder; color: #333;">X</button></div><div style="padding: 5px; border-style: solid; border-width: 1px; border-color: #EEF; border-top-width: 0; background-color: #FFF;"><iframe width="100%" ' + 
		    'height="100%" marginWidth="0" marginHeight="0" border="0" frameborder="0" src="' + url + '"></iframe></div>';
		with(fgDiv.style) {
			position = 'absolute';
			top = '200px';
			left = '200px';
			zIndex = 999999;
			width = '500px';
			height = '300px';
		}
		bgDiv.appendChild(fgDiv);
		
		// Add to page
		document.body.style.overflow = 'hidden';
		bgDiv.style.visibility = 'hidden';
		document.body.appendChild(bgDiv);
		bgDiv.style.visibility = 'visible';
		this._container = bgDiv;
	};
	evisjs.Lightbox.prototype.hide = function() {
		// Remove container
		var bgDiv = this._container;
		bgDiv.innerHTML = '';
		document.body.removeChild(bgDiv);
		this._container = null;
		
		// Restore body overflow
		document.body.style.overflow = this._originalBodyOverflow;
		this._originalBodyOverflow = null;
	};
	evisjs.Lightbox.prototype._container = null;
	evisjs.Lightbox.prototype._originalBodyOverflow = null;

	function showDialog()
	{
		var win = window.showModalDialog('mdContent.html','param','');
		document.getElementById('result').innerHTML = win;
	}
	
	function showLightbox()
	{
		var lb = new evisjs.Lightbox();
		lb.show('mdContent.html','param', 'opts');
	}
</script>
<body bgcolor="#9999EE">
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<button id="btn" onclick="showDialog();">Show ModalDialog</button>
<button id="btn" onclick="showLightbox();">Show Lightbox</button>
<br>
<br>
<br>
<br>
<br>
<select>
	<option>ABC</option>
</select>
<br>
<br>
<div id="result"></div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</body>
</html>